<template>
    <view class="content">
        <view class="bg"></view>
        <view class="top">
            <view class="nav">
                <view class="nav-l" :class="{active : type == 1, unActiveL : type == 0}" :style="{left: 0 + 'px'}" @click="chooseNav(1)">线上快递</view>
                <view class="nav-r" :class="{active : type == 0, unActiveR : type == 1}" :style="{right: 0 + 'px'}" @click="chooseNav(0)">线下自提</view>
            </view>
            <view class="down" v-if="type == 1" @click="$gTo('/pages/address/address')">
                <view class="u-flex-1 u-font-36 text-bold u-padding-bottom-10" v-if="!userAdd">
                    <text>暂无地址，去添加~~</text>
                </view>
                <view v-else>
                    <view class="add-text">
                        <text class="add-icon">地址</text>
                        <text class="add">
                            {{ userAdd.province_txt }}{{ userAdd.city_txt }}{{ userAdd.district_txt }}{{ userAdd.address }}
                        </text>
                    </view>
                    <view class="u-flex">
                        <view class="add-name">{{ userAdd.name }}</view>
                        <view class="add-tel">{{ userAdd.mobile }}</view>
                    </view>
                </view>
                <u-icon name="arrow-right" color="#6d6d6d" size="28"></u-icon>
            </view>
            <view class="ziti" v-if="type == 0">
                <view class="add-text" v-if="data.supplier&&data.supplier[0]&&data.supplier[0].contact_address">
                    <text class="add-icon">地址</text>
                    <text class="add">{{ data.supplier[0].contact_address }}</text>
                </view>
                <view class="u-flex-1 u-font-36 text-bold u-padding-bottom-10" v-else>
                    <text>暂无自提店铺</text>
                </view>
                <view class="u-flex u-p-t-20">
                    <view class="border-r u-p-r-20" @click.stop="show = true">
                        <view class="ziti-tit">提货人</view>
                        <view class="u-flex">
                            <view class="ziti-name">{{name}}</view>
                            <image src="../../static/icon/g_write.png" class="write-icon"></image>
                        </view>
                    </view>
                    <view class="u-p-l-20" @click.stop="show = true">
                        <view class="ziti-tit">预留电话</view>
                        <view class="u-flex">
                            <view>{{tel}}</view>
                            <image src="../../static/icon/g_write.png" class="write-icon"></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="box u-p-t-40">
            <view class="item" v-for="(item, index) in data.goods" :key="index" v-if="index < 3 || moreShow">
                <image :src="item.image_uri" mode="aspectFit" class="img"></image>
                <view class="item-r">
                    <view class="goods-name">{{item.goods_name}}</view>
                    <view class="spec">{{item.supplier_name}}</view>
                    <view class="item-d">
                        <view class="price">￥<text class="price-num">{{item.sale_price}}</text></view>
                        <view class="deposit">订金￥{{item.deposit_price}}</view>
                        <view class="num">x{{item.goods_nums}}</view>
                    </view>
                </view>
            </view>
            
            <view class="class5" v-if="!moreShow && data && data.goods.length > 3" @click="moreShow = true">
                <u-icon name="arrow-down" color="#6d6d6d" size="28" label="查看全部" label-pos="left" label-color="#000"></u-icon>
            </view>
            <view class="class5" v-if="moreShow && data && data.goods.length > 3" @click="moreShow = false">
                <u-icon name="arrow-up" color="#6d6d6d" size="28" label="收起" label-pos="left" label-color="#000"></u-icon>
            </view>
            
            <view class="xiaoji">
                <view>小计</view>
                <view class="x-price">￥<text>{{data.orderAmount}}</text></view>
            </view>
        </view>
        
        <view class="box u-p-t-40 u-p-b-40 u-flex" @click="$gTo(`/pages/settlement/remarks`)">
            <view>备注</view>
            <view class="remark">{{remark || '添加备注'}}</view>
            <u-icon name="arrow-right" color="#6d6d6d" size="28"></u-icon>
        </view>
        
        <view class="box">
            <view class="pay-type" @click="isFull = 2">
                <image :src="isFull == 2 ? '../../static/icon/g_choose.png' : '../../static/icon/g_choose2.png'" class="choose"></image>
                <view class="u-flex-1">订金支付</view>
                <view class="x-price">￥<text>{{data.depositAmount}}</text></view>
            </view>
            <view class="pay-type" @click="isFull = 1">
                <image :src="isFull == 1 ? '../../static/icon/g_choose.png' : '../../static/icon/g_choose2.png'" class="choose"></image>
                <view class="u-flex-1">全款支付</view>
                <view class="x-price">￥<text>{{data.orderAmount}}</text></view>
            </view>
        </view>
        
         <!-- @click="$gTo(`/pages/coupon/choose-coupon`)" -->
        <view class="box u-p-t-40 u-p-b-40 u-flex u-row-between" @click="couponShow = true">
            <view class="u-flex">
                <view class="quan">券</view>
                <view>优惠券</view>
            </view>
            <view>
                {{ YHmoney || '请选择' }}
                <u-icon name="arrow-right" color="#6d6d6d" size="28"></u-icon>
            </view>
        </view>
        
        <view class="foot">
        	<view class="footer">
                <view class="u-flex">
                	<view class="pay-tit u-m-r-12">订单总额</view>
                    <view class="u-flex">
                        <view class="foot-tit">
                        	￥<text>{{ money }}</text>
                        </view>
                    </view>
                </view>
                <view class="pay-btn" @click.stop="$noMultipleClicks(toPay)">立即支付</view>
            </view>
            <!-- <view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view> -->
        </view>
        
        <!-- 自提人信息编辑 -->
        <u-mask :show="show">
            <view class="privacy-pop">
                <view class="privacy-pop-box">
                    <view class="close-01">
                        <u-icon name="close-circle" size="50" @click="show = false"></u-icon>
                    </view>
                    <view class="privacy-title">填写提货人信息</view>
                    <view class="privacy-txt">
                        <view class="privacy-item">
                            <view>提货人：</view>
                            <input type="text" placeholder="请填写提货人" class="privacy-inp" v-model="namee"/>
                        </view>
                        <view class="privacy-item">
                            <view>预留电话：</view>
                            <input type="number" placeholder="请填写预留电话" maxlength="11" class="privacy-inp" v-model="tell"/>
                        </view>
                    </view>
                    <view class="btn-text2" @click.stop="confirmTel">确定</view>
                </view>
            </view>
        </u-mask>
        
        <!-- 选择优惠券 -->
        <u-popup v-model="couponShow" :round="true" mode="bottom" :closeable="true" width="750rpx" height="1000rpx" border-radius="14">
            <view class="pop-box-cou">
                <view class="pop-title">选择优惠券</view>
                <view>
                    <scroll-view :scroll-y="true" style="height: 800rpx;">
                        <view>
                            <view class="pop-item" v-for="(item, index) in data.admin_coupon" :key="index" @click="chooseCoupon(item)">
                                <image :src="item.isSelect ? '../../static/icon/g_choose.png' : '../../static/icon/g_choose2.png'" class="choose"></image>
                                <view class="pop-item-r">
                                    <image src="../../static/image/g_coupon.png" class="cou-img"></image>
                                    <view class="u-flex-1">
                                        <view>满{{item.limit_price}}减{{item.offset_price}}</view>
                                        <view class="cou-time">使用日期：{{item.pbegin}}至{{item.pend}}</view>
                                    </view>
                                </view>
                            </view>
                            <view class="pop-cou-none" v-if="data.admin_coupon && data.admin_coupon.length == 0">
                                <view>暂无可用优惠券</view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                moreShow: false, //查看更多
                noClick: true,//连点
                data: {},
                goods: [],
                buyId: '', //购物车id
                remark: '',//备注
                type: 1, //1配送 0自提
                show: false,
                name: '', //自提 姓名
                tel: '', //自提 电话
                namee: '', //修改自提 姓名
                tell: '', //修改自提 电话
                userAdd: '', //默认地址
                couponShow: false,
                money: 0,
                YHmoney: 0,//优惠金额
                couponId: '',
                isFull: 1,//1全款支付 2订金支付
            };
        },
        onLoad(option) {
            if (option.data) {
                this.data = JSON.parse(option.data);
                this.data.goods.forEach((item) => {
                	var obj = {
                		goods_id: item.goods_id,//商品id
                		goods_sku_id: '',//规格id
                        goods_nums: item.goods_nums,//商品数量
                        // goods_name: item.goods_name,//商品名称
                	}
                	this.goods.push(obj)
                })
                if (this.data && this.data.admin_coupon && this.data.admin_coupon.length > 0) {
                    this.data.admin_coupon.forEach(cur => {
                        this.$set(cur, 'isSelect', false)
                    })
                }
                
                this.money = this.data.orderAmount
                console.log(this.data)
            }
            if (option.buyId) {
                this.buyId = option.buyId; //购物车进来时传的
            }
            
            // 接收备注监听
            uni.$on('remark', (data)=>{
            	this.remark = data;
            })
            
            this.getInfo()
        },
        onShow() {
            this.getAddress()
        },
        methods: {
            chooseCoupon(item) {
                const nowStatu = item.isSelect;
                this.data.admin_coupon.forEach(ii => {
                    ii.isSelect = false;
                })
                item.isSelect =! nowStatu
                if (item.isSelect) {
                    this.YHmoney = item.offset_price
                    this.money = this.money - this.YHmoney
                } else {
                    this.YHmoney = 0
                    this.money = this.data.orderAmount
                }
                this.couponShow = false
            },
            
            chooseNav(num) {
                // is_not_self_pickup=0支持自提
                if (this.type == num) return
                if (this.data.is_not_self_pickup != 0) {
                    this.$toast('该订单不支持自提，如有疑问请咨询客服。')
                    return
                } else {
                    this.type = num
                }
            },
            
            // 立即支付
            toPay() {
                if (this.type == 1 && !this.userAdd) {
                	this.$toast('请添加地址！')
                	return
                }
                if (this.type == 0) {
                    if (!this.name || !this.tel) {
                        this.$toast('自提人姓名和电话都不能为空！')
                        return
                    }
                }
                this.data.admin_coupon.forEach(ii => {
                    if (ii.isSelect) {
                        this.couponId = ii.id
                    }
                })
                
            	this.$ajax('addOrder', {
                    userToken: this.$getSync('userToken'),
                    goods: this.goods, // [ ['goods_id' => 71,'goods_name'=>"日本进口膏药",'goods_nums' => 1,'goods_sku_id'=>'120'] ]
                    buy_id: this.buyId || '', //购物车id
                    user_address_id: this.userAdd.id, //收货地址id 快递必传
                    user_message: this.remark, //买家留言
                    buyType: 1,
                    coupon_id: this.couponId,
                    supplier_id: this.data.supplier_ids,
                    shipping_type: this.type,
                    receiver_name: this.name,
                    receiver_mobile: this.tel,
                    pay_mode: this.isFull,//支付模式 1-全款支付 2-定金支付
            	}).then(ret => {
            		if (ret.status == 0) {
                        this.$gTo('/pages/pay/pay?id=' + ret.data.id + '&money=' + ret.data.pay_amount)
            		} else {
            			this.$toast(ret.message)
            		}
            	})
            },
            
            // 获取默认收货地址
            getAddress() {
                this.$ajax('userDefAddr', {
                    userToken: this.$getSync('userToken'),
                }).then(ret => {
                    if (ret.status == 0) {
                        this.userAdd = ret.data;
                    } else {
                        this.$toast(ret.message);
                    }
                });
            },
            
            getInfo() {
            	this.$ajax('getInfo', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.name = ret.data.nickname
                        if (ret.data.mobile) {
                            this.tel = ret.data.mobile
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            // 编辑提货人 电话
            confirmTel() {
                if (!this.namee && !this.name) {
                    this.$toast('请填写提货人')
                    return
                }
                if (!this.tell && !this.tel) {
                    this.$toast('请填写预留电话')
                    return
                }
                if (this.tell) {
                    if (!this.$checkPhone(this.tell)) {
                        this.$toast('手机号码格式不正确！')
                        return
                    }
                }
                if (this.tel) {
                    if (!this.$checkPhone(this.tel)) {
                        this.$toast('手机号码格式不正确！')
                        return
                    }
                }
                if (this.namee) {
                    this.name = this.namee;
                }
                if (this.tell) {
                    this.tel = this.tell;
                }
                this.show = false;
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .content {
    	padding: 50rpx 20rpx 200rpx;
    }
    
    .bg {
    	width: 100%;
    	height: 390rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    	background: linear-gradient(to bottom, #00734c, #f5f5f5);
    }
    .top{
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    .nav>view{
        width: calc(710rpx / 2);
        text-align: center;
        padding: 15rpx 0;
        font-size: 26rpx;
    }
    .nav-l{
        background-color: #f2f3f7;
        border-radius: 20rpx 0 0 0 ;
    }
    .nav-r{
        background-color: #f2f3f7;
        border-radius: 0 20rpx 0 0 ;
    }
    .active{
        background-color: #fff;
        font-size: 30rpx;
        font-weight: bold;
    }
    .active::after{
        display: block;
        content: '';
        width: calc(710rpx / 2);
        height: 40rpx;
        background-color: #fff;
        border-radius: 20rpx 20rpx 0 0;
        position: absolute;
        top: -20rpx;
        z-index: -1;
    }
    .unActiveL{
        border-radius: 20rpx 0 20rpx 0;
    }
    .unActiveR{
        border-radius: 0 20rpx 0 20rpx;
    }
    
    .down{
        padding: 40rpx 25rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .add-text{
        padding-bottom: 10rpx;
    }
    .add-icon{
        vertical-align: middle;
        padding: 4rpx 12rpx;
        font-size: 18rpx;
        color: #8d6036;
        background-color: #f8e4cb;
        border-radius: 5rpx;
        margin-right: 10rpx;
    }
    .add{
        vertical-align: middle;
        font-size: 36rpx;
        font-weight: bold;
    }
    .add-name{
        color: #8a8a8a;
        font-size: 28rpx;
        max-width: 380rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .add-tel{
        color: #8a8a8a;
        font-size: 28rpx;
        padding-left: 30rpx;
    }
    .ziti{
        padding: 40rpx 25rpx;
    }
    .ziti-r{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }
    .arrow-r-022{
        width: 12rpx;
        height: 20rpx;
    }
    .del-08{
        width: 123rpx;
        height: 123rpx;
        border: 2rpx solid #e6e6e6;
        border-radius: 5rpx;
        margin-top: 40rpx;
    }
    .ziti-tit{
        font-size: 26rpx;
        color: #8a8a8a;
        padding-bottom: 5rpx;
    }
    .ziti-name{
        max-width: 370rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .write-icon{
        width: 20rpx;
        height: 21rpx;
        margin-left: 10rpx;
    }
    .border-r{
        border-right: 2rpx solid #e6e6e6;
    }
    
    
    .box{
        padding: 0 25rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
    }
    .img{
        width: 160rpx;
        height: 160rpx;
        border: 2rpx solid #e3e3e3;
        border-radius: 15rpx;
        overflow: hidden;
        margin-right: 15rpx;
    }
    .item-r{
        flex: 1;
    }
    .goods-name{
        width: 475rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 28rpx;
        font-weight: bold;
    }
    .spec{
        width: 475rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 24rpx;
        color: #6d6d6d;
        padding-top: 5rpx;
    }
    .item-d{
        padding-top: 45rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .price{
        font-size: 26rpx;
    }
    .price-num{
        font-size: 38rpx;
        font-weight: bold;
        padding-right: 30rpx;
    }
    .deposit{
        font-size: 24rpx;
        color: #ff5f2b;
        padding: 4rpx 12rpx;
        background-color: #fff1ec;
        border-radius: 5rpx;
    }
    .num{
        flex: 1;
        font-size: 26rpx;
        color: #929292;
        text-align: right;
    }
    .class5 {
        display: flex;
        justify-content: center;
        align-items: center;
    	width: 205rpx;
    	height: 65rpx;
    	border: 2rpx solid #e4e7ed;
    	border-radius: 30rpx;
    	margin: 20rpx auto;
    }
    
    .cou{
        padding-bottom: 25rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .quan{
        width: 30rpx;
        height: 30rpx;
        background: linear-gradient(to top, #fe332c,#fe6b2b);
        border-radius: 8rpx;
        font-size: 20rpx;
        color: #fff;
        text-align: center;
        line-height: 30rpx;
        margin-right: 10rpx;
    }
    .xiaoji{
        padding: 30rpx 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-top: 2rpx solid #f0f0f0;
    }
    .x-price{
        color: #f62a2a;
    }
    .x-price>text{
        font-size: 42rpx;
        font-weight: bold;
    }
    
    .remark{
        flex: 1;
        text-align: right;
        padding: 0 10rpx;
    }
    .pay-type{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #f0f0f0;
    }
    .pay-type:last-child{
        border-bottom: none;
    }
    .choose{
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
    }
    
    .foot {
    	width: 100vw;
    	background-color: #fff;
        border-top: 2rpx solid #f0f0f0;
    	position: fixed;
    	left: 0;
    	bottom: 0;
    	z-index: 10;
    }
    .footer {
        width: 100vw;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25rpx;
    }
    
    .foot-tit {
    	font-size: 26rpx;
    	line-height: 28rpx;
    	color: #f62a2a;
    	font-weight: bold;
    
    	text {
    		font-size: 42rpx;
    		line-height: 44rpx;
    
    	}
    }
    .pay-btn {
    	width: 202rpx;
    	height: 76rpx;
    	font-size: 30rpx;
    	line-height: 76rpx;
    	color: #fff;
    	text-align: center;
    	border-radius: 38rpx;
    	background: #ff8a00;
    }
    
    
    // 优惠券
    .pop-box-cou{
        padding: 0 30rpx;
        background-color: #f9f9f9;
    }
    .pop-title{
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        padding: 30rpx;
    }
    .pop-item{
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .pop-item-r{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 35rpx 25rpx;
        background-color: #fff;
        border-radius: 15rpx;
        font-size: 34rpx;
        font-weight: bold;
    }
    .cou-img{
        width: 140rpx;
        height: 140rpx;
        margin-right: 15rpx;
    }
    .cou-time{
        font-size: 24rpx;
        color: #999999;
        font-weight: normal;
        padding-top: 25rpx;
        border-top: 2rpx dashed #999;
        margin-top: 25rpx;
    }
    .pop-cou-none{
        font-size: 30rpx;
        color: #9b9b9b;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 100rpx;
    }
    
    // 自提人弹窗
    .privacy-pop {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .privacy-pop-box {
        width: 700rpx;
        padding: 40rpx 20rpx 20rpx;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 20rpx;
        position: relative;
    }
    .close-01{
        position: absolute;
        right: 20rpx;
        top: 20rpx;
    }
    .privacy-title {
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        padding: 20rpx 0 40rpx;
    }
    .privacy-txt {
        font-size: 26rpx;
    }
    .privacy-item{
        height: 77rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25rpx;
        margin-bottom: 20rpx;
    }
    .privacy-inp{
        width: 63vw;
        height: 77rpx;
        background-color: #f8f8f8;
        border-radius: 15rpx;
        line-height: 77rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 20rpx;
    }
    .btn-text2{
        font-size: 30rpx;
        color: #fff;
        background-color: #00734c;
        padding: 20rpx 50rpx;
        border-radius: 50rpx;
        margin: 20rpx;
        text-align: center;
    }

</style>
